import React, {Component} from 'react';
import {ActivityIndicator, Menu, NavBar, SearchBar} from 'antd-mobile';

const data = [
    {
        value: '1',
        label: 'Food',
        children: [
            {
                label: 'All Foods',
                value: '1',
                disabled: false,
            },
            {
                label: 'Chinese Food',
                value: '2',
            }, {
                label: 'Hot Pot',
                value: '3',
            }, {
                label: 'Buffet',
                value: '4',
            }, {
                label: 'Fast Food',
                value: '5',
            }, {
                label: 'Snack',
                value: '6',
            }, {
                label: 'Bread',
                value: '7',
            }, {
                label: 'Fruit',
                value: '8',
            }, {
                label: 'Noodle',
                value: '9',
            }, {
                label: 'Leisure Food',
                value: '10',
            }],
    }, {
        value: '2',
        label: 'Supermarket',
        children: [
            {
                label: 'All Supermarkets',
                value: '1',
            }, {
                label: 'Supermarket',
                value: '2',
                disabled: true,
            }, {
                label: 'C-Store',
                value: '3',
            }, {
                label: 'Personal Care',
                value: '4',
            }],
    },
    {
        value: '3',
        label: 'Extra',
        isLeaf: true,
        children: [
            {
                label: 'you can not see',
                value: '1',
            },
        ],
    },
];

class MyAddress extends Component {
    state = {
        show: false,
        initData: '',
        searchValue: "美食"
    }
    clickHandler = (type, param, e) => {
        if (!type) return;

        switch (type) {
            case "menu": {
                e.stopPropagation();
                e.preventDefault(); // Fix event propagation on Android
                this.setState({
                    show: !this.state.show,
                });
                // mock for async data loading
                if (!this.state.initData) {
                    setTimeout(() => {
                        this.setState({
                            initData: data,
                        });
                    }, 500);
                }
                break;
            }
            case "mask": {
                console.log('mask')
                this.setState({
                    show: false,
                });
                break;
            }
        }
    }
    changeHandler=(type,param,e)=>{
        if (!type) return;
        switch (type){
            case "menuSelect":{
                console.log(param)
                break;
            }
        }
    }


    render() {
        const {clickHandlerBack} = this.props;
        const {initData, show} = this.state;
        const menuEl = (
            <Menu
                className="foo-menu"
                data={initData}
                value={['1', '3']}
                onChange={this.changeHandler.bind(null,'menuSelect')}
                height={document.documentElement.clientHeight * 0.6}
            />
        );
        const loadingEl = (
            <div style={{
                width: '100%',
                height: document.documentElement.clientHeight * 0.6,
                display: 'flex',
                justifyContent: 'center'
            }}>
                <ActivityIndicator size="large"/>
            </div>
        );
        return (
            <div className="my-address">
                <div className="fixed-top">
                    <a className="btn-back"
                       onClick={clickHandlerBack.bind(null, 'selectAddressBack', {})}
                    ><i
                        className="icon anticon">&#xe620;</i></a>
                    <span className="name">选择收货地址</span>
                    <a className="btn-add">新增地址</a>
                </div>
                <div className="search">
                    <div className={show ? 'menu-active' : ''}>
                        <NavBar
                            leftContent="北京市"
                            mode="light"
                            // icon={<img src="https://gw.alipayobjects.com/zos/rmsportal/iXVHARNNlmdCGnwWxQPH.svg"
                            //            className="am-icon am-icon-md" alt=""/>}
                            icon={<i className="icon anticon">&#xe61d;</i>}
                            onLeftClick={this.clickHandler.bind(null, 'menu', {})}
                            className="top-nav-bar"
                        >

                            <SearchBar
                                style={{width: "100%"}}
                                value={this.state.searchValue}
                                placeholder="Search"
                                onSubmit={value => console.log(value, 'onSubmit')}
                                onClear={value => console.log(value, 'onClear')}
                                onFocus={() => console.log('onFocus')}
                                onBlur={() => console.log('onBlur')}
                                onCancel={() => console.log('onCancel')}
                                showCancelButton
                                onChange={undefined}
                            />
                        </NavBar>
                        {show ? initData ? menuEl : loadingEl : null}
                        {show ? <div className="menu-mask" onClick={this.clickHandler.bind(null, 'mask')}/> : null}
                    </div>
                </div>
                <div className="cur-pos">
                    <h4>当前定位</h4>
                    <p>
                        <i className="icon anticon">&#xe6a2;</i>
                        <span>当前位置XXXXXXXXXXXXX</span>
                        <i className="icon anticon refresh">&#xe616;</i>
                    </p>
                </div>
                <div className="my-add-list">
                    <h4>我的收货地址</h4>
                </div>
            </div>
        )
    }
}

export default MyAddress;